<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card>
        <el-descriptions
          title="乡镇详情"
          :labelStyle="labelStyle"
          :column="2"
          border
        >
          <el-descriptions-item label="乡镇" :span="2">{{
            exData.orgName
          }}</el-descriptions-item>
          <el-descriptions-item label="计划开始时间">{{
            taskInfo.startTime
          }}</el-descriptions-item>
          <el-descriptions-item label="计划结束时间">{{
            taskInfo.endTime
          }}</el-descriptions-item>
          <el-descriptions-item label="改造牵头人">{{
            taskInfo.lerderUserName
          }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{
            taskInfo.lerderUserMobile
          }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{
            exData.status | keyText("BARRIER_FREE_STATUS")
          }}</el-descriptions-item>
          <el-descriptions-item label="可下发数量">
            {{ exData.taskCount}}
          </el-descriptions-item>
        </el-descriptions>
        <div class="opt">
          <!-- <el-button @click="pass">
            审批通过
          </el-button>
          <el-button @click="unPass">
            审批不通过
          </el-button> -->
          <el-button @click="back">
            返回
          </el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <el-descriptions title="社区汇总结果"></el-descriptions>
        <div v-if="records.length !== 0">
          <template v-for="item in records">
            <div :key="item.id" style="margin-bottom:20px">
              <el-descriptions :labelStyle="labelStyle" :column="2" border>
                <el-descriptions-item
                  label="社区"
                  :contentStyle="{ width: '150px' }"
                >
                  {{ item.orgName }}
                </el-descriptions-item>
                <el-descriptions-item label="汇总人数">
                  {{ item.count }}
                </el-descriptions-item>
                <el-descriptions-item label="汇总状态">
                  {{ item.status | keyText("BARRIER_FREE_STATUS") }}
                </el-descriptions-item>
                <el-descriptions-item label="可下发数量">
                  {{ item.taskCount}}
                </el-descriptions-item>
              </el-descriptions>
              <div class="desAfter">
                <span @click="view(item)">
                  查看详情
                </span>
              </div>
            </div>
          </template>
          <div style="text-align:center">
            <el-pagination
              style="display:inline"
              background
              layout="total, prev, pager, next"
              :page-size="3"
              :total="total"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据"></el-empty>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "manageDetail_1",
  props: {
    obj: [Object, Boolean]
  },
  activated() {
    if (this.obj) {
      this.remouldId = this.obj.remouldId || this.obj.id;
      this.exData = this.obj;
      // 获取汇总任务信息
      this.API.getRemouldById({ id: this.remouldId }).then(res => {
        this.taskInfo = res.data;
        this.getPageData();
      });
    }
  },
  data() {
    return {
      remouldId: this.obj.remouldId,
      exData: this.obj,
      labelStyle: {
        width: "120px",
        textAlign: "center"
      },
      taskInfo: {},
      records: [],
      dialogVisible: false,
      total: 1,
      pageIndex: 1
    };
  },
  methods: {
    // 获取分页数据
    getPageData() {
      let query = {
        remouldId: this.remouldId,
        townId: this.exData.id,
        pageIndex: this.pageIndex,
        pageSize: 3
      };
      // 获取社区汇总信息
      this.API.getRemouldVillageList(query).then(ret => {
        this.records = ret.data.records;
        this.total = ret.data.total;
      });
    },
    // 返回
    back() {
      this.$parent.show("manageDetail", false);
    },
    // 审批通过
    pass() {},
    // 审批不通过
    unPass() {},
    // 详情
    view(item) {
      this.$parent.show("manageDetail_2", item);
    },
    // 分页回调
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getPageData();
    }
  }
};
</script>
<style scoped>
.opt {
  margin: 20px;
  display: flex;
  justify-content: center;
}
.desAfter {
  border: 1px solid #ebeef5;
  border-top: none;
  padding: 12px 10px;
  font-size: 14px;
  color: #409eff;
  text-align: center;
}
.desAfter span {
  margin: 0 5px;
  cursor: pointer;
}
</style>
